<template>
  <div class="box">
    <header class="title" :class="[GuessflexTitle]">
      <h2>猜你喜欢</h2>
    </header>
    <figure class="box-content" v-for="item of listGuess" :key="item.id">
      <div class="box-content-images" >
        <img :src="item.imgUrl" alt="">
        <p class="images-text">
          {{item.desc}}
        </p>
      </div>
      <h3>{{item.detail}}</h3>

      <footer class="box-footer">
        <span class="left">距离您1.1km</span>
        <span class="right">￥&nbsp; 120元起</span>
      </footer>
    </figure>

  </div>
</template>

<script>
  export default {
    props:["listGuess"],
    name: "homeGuess",
    data(){
      return {
        GuessflexTitle:''

      }
    },
    methods:{
      scrollChange(){
        let height = document.documentElement.scrollTop;
        if(height > 580){
          this.GuessflexTitle = 'GuessflexTitle'
        }else{
          this.GuessflexTitle = ''
        }
      }
    },
    mounted(){
      window.addEventListener('scroll',this.scrollChange)
    }

  }
</script>

<style lang="stylus" scoped>
  .box
    background: #ffffff
    border-bottom: 0.1rem #efefef solid
    padding :0.2rem 0
    .GuessflexTitle
      position :fixed
      top :0.9rem
      left :0
      z-index :999
      background: azure
      width: 100%
    .title
      margin-bottom :0.2rem

      h2
        text-align :center
        width :2rem
        margin :0 auto
        font-weight bolder
        color : #579b98
        font-size :0.4rem
        line-height :0.5rem
        border-bottom :0.1rem #579b98 solid
        padding :0.2rem
    .box-content
      overflow:hidden
      width:92%
      height:0
      padding-bottom:62%
      margin:0 auto
      padding-top:.2rem
      border-top:.05rem solid #eee
      .box-content-images
        overflow:hidden
        height:0
        padding-bottom:48.3%
        position :relative
        img
           width :100%
        .images-text
          position:absolute
          bottom:.0
          color :#fff
          background : rgba(2, 1, 1, 0.3)
          padding :0.2rem
          width :100%
     h3
       margin :0.2rem 0
       font-weight bold
       line-height :0.2rem
  .box-footer
     padding :0.2rem
     .left
       float :left
       color :#aaa
     .right
       float :right
       color :#ff6600
       font-weight bolder


</style>
